import React, { Component } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
export default class TodoMain extends Component {
  state = {
    // 当前双击的id
    currentId: '',
    // 当前双击的名字
    currentName: '',
  }
  render() {
    const { list, active } = this.props
    let showList = []
    if (active === 'all') {
      showList = [...list]
    } else if (active === 'active') {
      showList = [...list].filter((item) => item.done === false)
    } else {
      showList = [...list].filter((item) => item.done === true)
    }
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={list.every((item) => item.done)}
          onChange={this.handleChange}
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
          {showList.map((item) => (
            <li
              className={
                (item.done ? 'completed' : '',
                //______________________________________________________________
                item.id === this.state.currentId ? 'editing' : '')
              }
              key={item.id}
            >
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.done}
                  onChange={() => this.edit(item)}
                />
                <label onDoubleClick={() => this.showEdit(item)}>
                  {item.name}
                </label>
                <button
                  className="destroy"
                  onClick={() => this.del(item.id)}
                ></button>
              </div>
              <input
                className="edit"
                value={this.state.currentName}
                onChange={(e) => this.setState({ currentName: e.target.value })}
                onKeyUp={this.handleKeyup}
              />
            </li>
          ))}
        </ul>
      </section>
    )
  }
  // 删除
  del = async (id) => {
    await axios.delete(`http://localhost:8888/todos/${id}`)
    this.props.getTodoList()
  }
  // 修改
  edit = async (item) => {
    await axios.patch(`http://localhost:8888/todos/${item.id}`, {
      done: !item.done,
    })
    this.props.getTodoList()
  }
  // 全选 和反选
  handleChange = (e) => {
    const arr = this.props.list.filter(
      (item) => item.done === !e.target.checked
    )
    arr.forEach(async (item) => {
      await axios.patch(`http://localhost:8888/todos/${item.id}`, {
        done: e.target.checked,
      })
    })
    this.props.getTodoList()
  }

  // 编辑
  showEdit = ({ id, name }) => {
    // console.log('id', id)
    this.setState({
      currentId: id,
      currentName: name,
    })
  }

  handleKeyup = async (e) => {
    // 判断
    if (e.keyCode === 27) {
      // 按了esc，取消修改
      this.setState({
        currentId: '',
        currentName: '',
      })
    }
    if (e.keyCode === 13) {
      // 添加
      // this.props.editTodo(this.state.currentId, this.state.currentName)
      await axios.patch(`http://localhost:8888/todos/${this.state.currentId}`, {
        name: this.state.currentName,
      })
      // 关闭
      this.setState({
        currentId: '',
        currentName: '',
      })
      // 重新渲染
      this.props.getTodoList()
    }
  }
}
TodoMain.propTypes = {
  list: PropTypes.array.isRequired,
}
